﻿@{
    ViewBag.Title = "ImageUpload2";
}

<style type="text/css">
    #dropZone {
        background: gray;
        border: black dashed 3px;
        width: 200px;
        padding: 50px;
        text-align: center;
        color: white;
    }
</style>

<script type="text/javascript" src="/Scripts/jquery.filedrop.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $('#dropZone').filedrop({
                decodeBase64 : true,
                url: '@Url.Action("ImageUpload2", "Test")',
                paramname: 'files',
                maxFiles: 5,
                dragOver: function() {
                    $('#dropZone').css('background', 'blue');
                },
                dragLeave: function() {
                    $('#dropZone').css('background', 'gray');
                },
                drop: function (ev) {
                    //console.log(ev.target.result);
                    //$('#dropZone').css('background', 'gray');
                },
                afterAll: function() {
                    $('#dropZone').html('The file(s) have been uploaded successfully!');
                },
                uploadStarted: function (i, file, len) {
                    createImage(file);
                },
                uploadFinished: function (i, file, response, time) {
                    $('#uploadResult').append('<li>' + file.name + '</li>');
                }
            });
        });
    });
    
    function createImage(file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            console.log(e.target.result);
            // e.target.result holds the DataURL which
            // can be used as a source of the image:
            //$('#imgPreview').attr("src", "url('" + e.target.result + "')");
            $('#imgPreview').attr("src", e.target.result);
        };

        // Reading the file as a DataURL. When finished,
        // this will trigger the onload function above:
        reader.readAsDataURL(file);
    }
</script>

<h2>File Drag & Drop Upload Demo</h2>
<div id="dropZone" >Drop your files here</div>
<br/>
Uploaded Files:
<ul id="uploadResult"></ul>
<img id="imgPreview" src="" />

